<template>
  <div>
    <!--排序导航-->
    <ul class="sort">
      <li :class="{active:orderBy==bySynthesisDesc}" @click="toggleSort(bySynthesisDesc)">
        <span>综合排序</span>
      </li>
      <li :class="{active:orderBy==bySellNumDesc}" @click="toggleSort(bySellNumDesc)">
        <span>销量优先 <span class="icon icon-xiajiang"></span></span>
      </li>
      <li :class="{active:orderBy==byCreditRatingDesc}" @click="toggleSort(byCreditRatingDesc)">
        <span>信用优先</span>
      </li>
    </ul>

    <!--商铺列表-->
    <div class="shop-list overflow">
      <div class="weui-panel__bd" v-for="shop in shopList" :key="shop.id">
        <div  class="weui-media-box weui-media-box_appmsg shop">
          <router-link :to="{name:'shopDetail',query:{shopId:shop.id}}">
            <div class="weui-media-box__hd" :style="'backgroundImage: url('+(shop.smImageUrl.substr(0,4).toLowerCase() == 'http' ? shop.smImageUrl : resUrl+shop.smImageUrl)+')'"></div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">
                <span>{{shop.name}}</span>
                <span class="authentication" v-if="shop.status==shopAudited">认证商铺</span>
              </h4>
              <p class="weui-media-box__desc">
                <span>{{shop.creditRating}}</span><span>月销量{{shop.monthly}}</span><span>拍品{{shop.productNum}}件</span>
              </p>
            </div>
          </router-link>
          <!--<span class="follow">关注</span>-->
        </div>
        <div class="img-box">
          <router-link v-for="pro in shop.products" :key="pro.id" :to="{name:'lotDetail',query:{lotId:pro.id,shopId:shop.id}}">
            <div :style="'backgroundImage: url('+(pro.smImageUrl.substr(0,4).toLowerCase() == 'http' ? pro.smImageUrl : resUrl+pro.smImageUrl)+')'"></div>
          </router-link>

        </div>
      </div>

    </div>

    <pagination :total="total" v-on:listenToChildEvent="getPageIndex"></pagination>

  </div>
</template>

<script>
  import {ipconfig} from '../../../assets/js/ipconfig';
  import {getStatusMapByKey} from "../../../assets/js/tools";
  import {getShopList} from '../../../assets/js/getData';
  export default {
    name: "productShop",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        shopList:[],//当前显示商铺列表
        pageSize:10,//每页显示
        pageNum:1,//第几页
        total:null,//总页数
        orderBy:null,//默认排序
        name:null,
        bySynthesisDesc:null,//综合排序
        bySellNumDesc:null,//销量
        byCreditRatingDesc:null,//信用
        shopAudited:null,//店铺已认证
      }
    },
    created(){
      this.name = this.$route.query.keyword;
      let eOrderByType = getStatusMapByKey('eOrderByType');
      this.bySynthesisDesc = eOrderByType.bySynthesisDesc.val;//综合排序
      this.bySellNumDesc = eOrderByType.bySellNumDesc.val;//销量
      this.byCreditRatingDesc = eOrderByType.byCreditRatingDesc.val;//信用

      let eShopStatus = getStatusMapByKey('eShopStatus');
      this.shopAudited = eShopStatus.audited.val;//店铺已认证

      this.orderBy = this.bySynthesisDesc;

      this.getShopList(this.pageNum);
    },
    methods:{
      getPageIndex(pageIndex){
        this.pageNum = parseInt(pageIndex);
        this.getShopList(this.pageNum);
      },
      toggleSort(num){
        this.orderBy=num;
        this.getShopList(this.pageNum,this.orderBy)
      },
      //获取店铺列表
      //排序 descType  1 综合  20信用等级  18销量
      async getShopList(pageNum,orderBy){
        let params = {
          name:this.name,
          pageNum: pageNum,
          pageSize:this.pageSize,
          descType:orderBy,
        };
        let res = await getShopList(params);
        if(res.data.reqResult.code>0){
          this.shopList = res.data.data;
          this.total = Math.ceil(res.data.total/this.pageSize);
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
    }
  }
</script>

<style scoped>
  /*商铺列表*/
  .shop-list{
    background: #F2F2F2;
  }
  .shop-list .weui-panel__bd{
    background: #ffffff;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .shop-list .weui-panel__bd:last-child{
   margin-bottom: 0;
  }
  .weui-media-box_appmsg{
    justify-content: space-between;
  }
  .weui-media-box_appmsg a{
    width: 100%;
    display: flex;
    align-items: center;
  }
  .follow{
    display: inline-block;
    border: 1px solid #c50000;
    color: #c50000;
    font-size: 0.6rem;
    position: absolute;
    top: 15px;
    right: 15px;
    height: 0.65rem;
    line-height: 0.65rem;
    padding: 0 0.35rem;
    border-radius: 5px;
  }

  .img-box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 15px;
    overflow: auto;
  }
  .img-box a{
    /*width: 27%;*/
    margin-right: 0.5rem;
    flex-shrink: 0;
  }
  .img-box div{
    width: 25.6vw;
    height: 25.6vw;
    background-origin: content-box;
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.2);
  }
</style>
